<template>
  <div>
    <h3>jquery-ui 拖拽</h3>
    <iframe height="100%" width="100%" frameborder="no" style="margin: 0 auto;" border="0" marginwidth="0" marginheight="0" scrolling="" allowtransparency="yes" src="static/HTML/sortable.html"></iframe>
    <!-- <div v-html="src"></div> -->
    <!-- <input type="button" name="开启拖拽" value="开启拖拽" id="open" /> <input type="button" name="关闭" value="关闭拖拽" id="close" /><input type="button" name="刷新页面" value="刷新页面" id="refresh" />

    <div id="sortableBOx">
      <div class="boxDiv" id="boxDiv1">1</div>
      <div class="boxDiv" id="boxDiv2">2</div>
      <div class="boxDiv" id="boxDiv3">3</div>
      <div class="boxDiv" id="boxDiv4">4</div>
      <div class="boxDiv" id="boxDiv5">5</div>
      <div class="boxDiv" id="boxDiv6">6</div>
      <div class="boxDiv" id="boxDiv7">7</div>
    </div> -->
    <hr>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import $ from "jquery";
// import "jquery-ui-dist/jquery-ui.js";
// import "jquery-ui-dist/jquery-ui.min.css";
// import "jquery-ui/ui/widgets/sortable";
// import "sortable.html";
export default {
  name: "",
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      src: "./sortable.html",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    $(function () {
      console.log("$", $("#sortableBOx"));
      var localStr = localStorage.sortableBOx;
      //如果有localst记录则，按照这个进行排序元素
      if (localStr) {
        var resArrBox = localStr.split(",");
        var resUlBox = $("#sortableBOx");
        //li 数组
        for (var i = 0; i < resArrBox.length; i++) {
          resUlBox.append($("#" + resArrBox[i]));
        }
      }

      $(document).ready(function () {
        $("#open").click(function () {
          $(".boxDiv").addClass("moved");
          $("#sortableBOx")
            .sortable(
              {
                opacity: 0.5,
                placeholder: "ui-state-highlight",
                beforeStop: function (event, ui) {
                  console.log("beforeStop event", event);
                  console.log("beforeStop ui", ui);
                  let arr = $("#sortableBOx").sortable("toArray");
                  arr = arr.filter(function (s) {
                    return s && s.trim();
                  });
                  console.log(arr);
                  //拖拽后利用localStorage记录顺序
                  localStorage.sortableBOx = arr;
                },
              },
              {
                change: function (event, ui) {
                  console.log("change event", event);
                  console.log("change ui", ui);
                },
              }
            )
            .disableSelection();
        });

        $("#close").click(function () {
          $("#sortableBOx").sortable("destroy");
          $(".boxDiv").removeClass("moved");
        });

        $("#hui").click(function () {
          $("#sortableBOx").sortable("cancel");
        });

        $("#refresh").click(function () {
          window.location.reload();
        });
      });
    });
  },
  // 方法集合
  methods: {},
};
</script>

<style>
iframe {
  width: 100%;
  height: calc(100vh - 81px);
}
#sortableBOx {
  width: 360px;
  display: flex;
  flex-wrap: wrap;
}

.boxDiv {
  width: 100px;
  height: 100px;
  background-color: #e9e9e9;
  text-align: center;
  line-height: 100px;
  font-size: 22px;
  margin: 10px;
}

.moved {
  cursor: pointer;
}
</style>
